<template>
  <div class="folder-root">
    <div class="folder-toolbar">
      <el-tooltip content="显示路径" placement="bottom" effect="light">
        <div class="col tool-item el-icon-guide "        @click="upPathColWidthHandler($event)"></div>
      </el-tooltip>
      <div class="add tool-item el-icon-folder-add "   @click="addFolderVisible($event)"></div>
      <div class="upd tool-item el-icon-edit"          @click="updFolderVisible($event)"></div>
      <div class="del tool-item el-icon-delete"        @click="deleFolder"></div>
      <el-tooltip content="默认" placement="bottom" effect="light">
        <div class="def tool-item iconfont icon-default" @click="reDefault"></div>
      </el-tooltip>
    </div>
    <div class="folder-table">

      <!--:default-expand-all="true" 默认展开全部 -->
      <el-table
          v-loading="folder.loading"
          border
          highlight-current-row
          class="folder-tree-table"
          ref="folderTable"
          size="mini"
          row-key="folderId"
          modal="false"
          :indent="10"
          :show-header="false"
          :data="folder.list"
          :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
          @contextmenu.prevent.native="findFolderTree"
          @row-click="currentFolder">
        <el-table-column prop="name"       label="名称" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="uploadPath" label="路径" :show-overflow-tooltip="true" :width="upPathColWidth"></el-table-column>
      </el-table>
    </div>


    <!-- ─────────────────────── 新增文件夹 ───────────────────── -->
    <el-dialog
        width="30%"
        class="bjs-dialog"
        :title="folder.form.folderId < 0 || folder.form.folderId == null? '新增文件夹' : '修改文件夹'"
        :visible.sync="folder.visible"
        :append-to-body="true"
        :close-on-click-modal="false"
        style="margin-top: 10px;">
      <el-form :model="folder.form" :rules="folder.rules" ref="folderForm"  label-width="100">
        <el-form-item>
          <el-input class="bjs-input" v-model="folder.form.folderId"  placeholder="文件夹ID" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <treeSelect
              style="width: 100%"
              :clearable=true
              :props="folder.props"
              :value="folder.form.folderPid"
              :options="folder.list"
              @getValue="folder.form.folderPid = $event"
          >
          </treeSelect>
        </el-form-item>
        <el-form-item>
          <el-input class="bjs-input" v-model="folder.form.name"  placeholder="文件夹名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="bjs-input" v-model="folder.form.uploadPath"  placeholder="云端地址,需要以/结尾,为空时上传至默认文件夹"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input class="bjs-input" v-model="folder.form.sort"  placeholder="排序"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button size="mini" class="bjs-button" @click="addFolder">提交</el-button>
          <el-button size="mini" class="bjs-button" @click="folder.visible=false">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getFolderTree, delFolder, postFolder, putFolder} from '../../../api/folder'
import { isNull } from '../../../assets/js/utils/validate'
import treeSelect from '../../../components/treeSelect'
export default {
  name: 'folder',
  props:{
    // 文件夹类型 1:图片 2:文章
    fType: {
      type: Number,
      default: () => 0
    }
  },
  data () {
    return {
      folder: {
        // 新增文件夹弹窗
        visible: false,
        current: { folderId: -1, name:'', uploadPath: '' },
        rules: {},
        form: {
          folderId: null,
          folderPid: 0,
          name: '',
          uploadPath:'',
          sort: 1
        },
        props:{
          value: 'folderId',
          label: 'name',
          children: 'child'
        },
        list: [],
        loading: true
      },
      upPathColWidth : 1
    }
  },
  computed: {
    isLogin () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},// false: 登陆 ,true: 未登陆
    theme   () {return this.$store.state.config.theme.type}
  },
  watch: {
    isLogin (val) {
      if(val) {
        this.findFolderTree()
      }
    },
    'folder.list' () {
      this._getCurrentList()
    }
  },
  mounted () {
    if (this.isLogin) {
      this.findFolderTree()
    }
  },
  methods: {
    findFolderTree(){
      this.folder.loading = true
      setTimeout(() => {
        getFolderTree({type: this.fType}).then(resp => {
          this.folder.list = resp.data
          this.folder.loading = false
        })
      },250)
    },
    /** 选中树状节点 */
    currentFolder (row) {
      // 当前选中
      this.folder.current.folderId   = row.folderId
      this.folder.current.name       = row.name
      this.folder.current.uploadPath = row.uploadPath
      // 表单表单
      this.folder.form.folderPid     = row.folderPid === 0 ? null : row.folderPid
      this.folder.form.name          = row.name
      this.folder.form.uploadPath    = row.uploadPath
      this.folder.form.sort          = row.sort
      this._getCurrentFolder(row)
    },
    resetForm () {
        this.folder.form.folderId   = null
        this.folder.form.folderPid  = 0
        this.folder.form.name       = ''
        this.folder.form.uploadPath =''
        this.folder.form.sort       = 1
    },
    /** 2.1 新增文件夹显示 */
    addFolderVisible () {
      this.resetForm()
      this.folder.visible = true
    },
    /** 2.2 修改文件夹 */
    updFolderVisible () {
      this.folder.form.folderId = this.folder.current.folderId
      if (isNull(this.folder.form.folderId) || this.folder.form.folderId < 0) {
        this.$bjsNotify.error('需要先选择文件夹才能修改!')
        return
      }
      this.folder.visible = true
    },
    /** 2.3 新增/修改文件夹 */
    addFolder() {
      let obj = this.folder.form
      obj.type = this.fType
      if(isNull(this.folder.form.folderId) || this.folder.form.folderId < 0) {
        postFolder(obj).then(() => {
          this.folder.visible = false
          this.findFolderTree()
          this.resetForm()
        })
      } else {
        putFolder(obj).then(() => {
          this.folder.visible = false
          this.findFolderTree()
          this.resetForm()
        })
      }
    },
    /** 3. 删除文件夹 */
    deleFolder() {
      if(isNull(this.folder.current.folderId) || this.folder.form.folderId < 0) {
        this.$bjsNotify.error('需要先选择文件夹才能删除!')
        return
      }
      this.$confirm('正在删除文件夹 『 ' + this.folder.current.name + ' 』, 文件夹中的内容将移动至默认文件夹, 是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = this.folder.current
        param.type = this.fType
        delFolder(param).then(() => {
          this.findFolderTree()
        })
      }).catch(()=>{})
    },
    reDefault () {
      let row = {
        folderId: -1,
        name: '默认上传',
        uploadPath : 'default/'
      }
      this.$refs.folderTable.setCurrentRow()
      this.$emit('getCurrentFolder',row)
    },
    upPathColWidthHandler () {
      if (this.upPathColWidth === 1) {
        if (this.fType === 1) {
          this.upPathColWidth = 153
        } else {
          this.upPathColWidth = 81
        }

      } else {
        this.upPathColWidth = 1
      }
    },
    _getCurrentList() {
      this.$emit('getCurrentList',this.folder.list)
    },
    _getCurrentFolder (row) {
      this.$emit('getCurrentFolder',row)
    }
  },
  components: {
    treeSelect
  }
}
</script>

<style scoped lang="scss">
  .folder-root {
    width: 100%;
    height: 100%;
    overflow: hidden;
    [data-theme="night"] & {
      background-color: $theme-bg-color-night;
    }
  }

  .folder-toolbar {
    width: 100%;
    height: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    border-top: 1px solid $theme-color-light-dark-3;
    border-bottom: 1px solid $theme-color-light-dark-3;

    [data-theme="night"] & {
      border-top: 1px solid $theme-color-night-dark-3;
      border-bottom: 1px solid $theme-color-night-dark-3;
    }

    .tool-item {
      height: 100%;
      width: 30%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      transition: background-color 0.3s;
      @include color();
      @include bg_color_3();

      &:hover {
        background-color: $theme-color-light-7;
        [data-theme="night"] & {
          background-color: $theme-color-night-dark-3;
        }
      }
    }


    .col {
      width: 10%;
      border-right: 1px solid $theme-color-light-5;
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }
    .add {
      width: 30%;
      border-right: 1px solid $theme-color-light-5;
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }
    .upd {
      width: 30%;
      border-right: 1px solid $theme-color-light-5;
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }
    .del {
      width: 30%;
      border-right: 1px solid $theme-color-light-5;
      [data-theme="night"] & {
        border-right: 1px solid $theme-color-night-dark-3;
      }
    }

    .def {
      width: 30%;
    }
  }

  .folder-table {
    height: 93%;
    overflow-y: auto;
    [data-theme="night"] & {
      background-color: $theme-bg-color-night !important;
    }
  }


  /**──────────────────────────────────────────────────────────────────────────────────────────────────────
  文件夹表格
   ──────────────────────────────────────────────────────────────────────────────────────────────────────*/
  .folder-tree-table {

    position: relative;
    border: 0;
    [data-theme="night"] & {
      background-color: $theme-bg-color-night;
      border-bottom: 1px solid #3e3c42;
    }

    /deep/ .el-table__body-wrapper {
      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
        /deep/ .el-table__body {
          background-color: $theme-bg-color-night;
        }
      }

    }

    /deep/ td {
      padding: 0 !important;
      [data-theme="night"] & {
        color: #8a8a8a;
        border-right: 1px solid #3e3c42;
        border-bottom: 1px solid #3e3c42;
      }
    }

    /deep/ tr {
      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
        &:hover {
          border-color: #212121 !important;
          /deep/ td {
            background-color: #3e3c42 !important;
          }
        }
      }
    }

    /deep/ .cell {
      font-size: 12px;
      padding-left: 3px;
      cursor: pointer;
      [data-theme="night"] & {
        background-color: $theme-bg-color-night;
      }
      &:hover {
        [data-theme="night"] & {
          color: $theme-color-night-dark;
          background-color: $theme-bg-color-night;
        }
      }
    }

    /deep/ tr.current-row > td {
      font-weight: bold;
      color: $theme-color-light-dark;
      background-color: $theme-color-light-1;
      [data-theme="night"] & {
        color: $theme-color-night-dark;
        background-color: $theme-color-night-dark-3;
      }

      &:hover {
        background-color: $theme-color-light-1;
        [data-theme="night"] & {
          background-color: $theme-color-night-dark-3;
        }
      }
    }

    /deep/ .el-table__expand-icon {
      width: 15px;
    }
  }

  .el-table::before {
    [data-theme="night"] & {
      background-color: $theme-bg-color-night !important;
    }
  }

  .el-table::after {
    [data-theme="night"] & {
      background-color: $theme-bg-color-night !important;
    }
  }
</style>
